import React from 'react';
import { Spin } from 'antd';
import { features, useTablePipeline } from 'ali-react-table';
import moment from 'moment';
import { connect } from 'umi';
import { HttpCode } from '#/utils/contacts.js';
import { PageLoading, TRDefault } from '@/components/index.js';
import { TjTable, useTRState } from '@/pages/ETrade/components';

import { default as HeadForm } from './form';
import { getShortMessageViewList } from './services.js';
import { tableColumns } from './helper';
import styles from './index.less';

const MessageView = ({ menuCode, buttonPermissions }) => {
  /** data */
  const [state, setState] = useTRState({
    // 初始化三件套
    spinning: true,
    error: '',
    power: buttonPermissions.find((item) => item.menuCode === 'MessageView'),
    // 表单
    formValues: null,
    // 数据
    loading: false,
    tableData: [],
  });

  /** apis */
  const onFinish = async (values) => {
    // // 数据
    if (!values) return;
    setState({
      formValues: values,
      loading: true,
    });
    const params = {
      endTime: moment(values.date[1].endOf('day')).format('YYYY-MM-DD HH:mm:ss'),
      keyWord: values.keyword,
      startTime: moment(values.date[0].startOf('day')).format('YYYY-MM-DD HH:mm:ss'),
      useTo: values.useTo,
    };
    const res = await getShortMessageViewList(params);
    let error = '';
    if (res?.statusCode === HttpCode.SUCCESS) {
      setState({
        tableData: res.data || [],
      });
    } else {
      error = res?.message || '系统异常';
    }
    setState({
      error,
      loading: false,
    });
  };

  const onChangeForm = (value) => {
    const formValues = { ...state.formValues, value };
    setState({
      formValues,
    });
  };

  // /** render */
  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource: state.tableData, columns: tableColumns })
    .primaryKey('id')
    .use(features.sort({ mode: 'single', highlightColumnWhenActive: true }))
    .appendRowPropsGetter((record, rowIndex) => {
      const color = rowIndex % 2 == 0 ? '#222629' : '#2D3133';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  const _renderContent = () => {
    if (state.loading) return null;
    if (!state.tableData?.length) return <TRDefault type="empty" />;
    return (
      <div className={styles.flex}>
        <div className={styles.boxInner}>
          <div className={styles.inbody}>
            <TjTable {...pipeline.getProps()} useVirtual={false} />
          </div>
        </div>
      </div>
    );
  };

  // if (state.spinning) return <PageLoading />;
  if (state.error) return <TRDefault type="error" message={state.error} />;
  return (
    <Spin spinning={state.loading}>
      <div className={styles.container}>
        <div className={styles.head}>
          <HeadForm onFinish={onFinish} onChangeForm={onChangeForm} tableData={state.tableData} />
        </div>
        <div className={styles.main}>{_renderContent()}</div>
      </div>
    </Spin>
  );
};

export default connect(({ global }) => ({
  menuCode: global.configure.menuCode,
  buttonPermissions: global.configure.buttonPermissions,
}))(MessageView);
